<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>我的推荐码</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js" type="text/javascript"></script>
	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		/*内容*/

		.content {
			box-sizing: border-box;
			padding: 0.54rem 0.32rem;
			width: 100%;

		}

		.content form {
			width: 100%;
		}

		.content form .sub {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}

		.content form .box {
			width: 100%;
			height: 9.07rem;
			padding-right: 0.32rem;
			background: #43475b;
			border-radius: 0.21rem;
		}

		.content form .box .top {
			position: relative;
			width: 100%;
			height: 2.45rem;

			background: #44485b;
			font-size: 0.28rem;
			line-height: 0.91rem;
			color: #fff;
			padding-left: 0.38rem;
			border-radius: 0.21rem;
			/*	-moz-border-radius-topright: 0.21rem;*/
		}

		.content form .box .top .top-log {
			width: 6.25rem;
			margin-top: 0.6rem;
		}

		.content form .box .top .bottom-log {
			width: 6rem;
			position: absolute;
			bottom: 0rem;
			left: 0.42rem;

		}

		.content form .box .code {
			width: 100%;
			height: 4.7rem;
			position: relative;
			margin-bottom: -0.75rem;
		}

		.content form .box .code img {
			position: absolute;
			top: 0.54rem;
			left: 1.81rem;
			width: 3.24rem;
			height: 3.24rem;
			/*border: 1px solid red;*/
		}

		.content form .box .info-box {
			width: 100%;
			height: 0.72rem;
			font-size: 0.28rem;
			line-height: 0.72rem;
			color: #fff;
			text-align: center;
		}
		.content form .box .invite-box {
			position: relative;
			text-align: center;
			color: #fff;

		}
		.content form .box .invite-box span{
			font-size: 0.28rem;
			
		}
		.content form .box .invite-box input{
			margin-left: -0.25rem;
			font-size: 0.28rem;
			display: inline-block;
			width: 3.5rem;
			background: #43475b;
			border: 0px;
			width:3.9rem;
		}
		.content form .box .invite-box textarea{
			position:absolute;
			opacity: 0;
			left:1.5rem;
			height: 0.5rem;
			font-size: 0.28rem;
			display: inline-block;
			width: 3.5rem;
				
		}
		.content form .box .invite-box button{
			padding: 0px;
			width: 0.5rem;
			margin-top: 0.3rem;
			background: #43475b;
			color: #9a9a9a;
			border: 0px;
		}
		
		.content form .box .info-box .info {
			color: #fff;
			text-decoration: none;
			border-bottom: 0px;
			font-size: 0.56rem;
		}

		.content form .box .foot {
			width: 100%;
			text-align: center;
			font-size: 0.28rem;
			color: #ababaf;
			margin-top: 0.25rem;
			line-height: 0.3rem;
		}
	</style>
</head>

<body>
	<script>
		$(function () {
			$("#wrapper").load("../header.html")

		})
		setTimeout(function () {
			$("#wrapper").find(".con").html("我的推荐码").end().find(".dot img").css("display", "none")
			$(".arrow").on("tap", function () {
				window.location.href = "index.html";
			})
		}, 200)
		setTimeout(function () {
			$("#wrapper").find(".con").html("我的推荐码").end().find(".dot img").css("display", "none")
			$(".arrow").on("tap", function () {
				window.location.href = "index.html";
			})
		}, 2000)
	</script>

	<div class="wrapper" id="wrapper"></div>


	<div class="content">
		<form action="#" method="post">
			<div class="box">
				<div class="top">
					<img src="../img/yaoqingma-logo.png" alt="" class="top-log">
					<img src="../img/zhuanshuma.png" alt="" class="bottom-log">
				</div>
				<div class="code">
					<img src="" alt="" id="code">
				</div>
				<div class="info-box">
					<span class="info" id="foot"></span>
				</div>
				<div class="invite-box">
					<span>推广链接：</span>
					<input id="copyTarget" value="" readonly class="info">
					<textarea id="hiddenText" class="hidden info" readonly></textarea>
					<button type="button" id="copyButton">复制</button>
				</div>
				<div class="foot">好友可使用您的邀请码进行注册</div>
			</div>
			<input type="button" class="sub" value="马上邀请好友加入">
		</form>
	</div>
	<script src="../js/mui.min.js"></script>
	<script>
			localStorage.weiCodeUrl = null;
			localStorage.tuijianma = null;
		$(".sub").on("tap", function () {
			// var num = parseFloat($(".middle").find(".info").html());
			window.location.href = "#"

		})
		render();

		function render() {
			//	請求	
			$.ajax({
				type: "GET",
				url: `${localStorage.top}api/UserCenter/getGeneralizeQrcode?TOKEN=${localStorage.token}`,
				success: function (data) {
					localStorage.weiCodeUrl = data.data.qrcode_url;
					localStorage.tuijianma = data.data.invite_code;
					localStorage.invite_url = data.data.invite_url;
					
					console.log(data)
					console.log(data.data.invite_url)
					console.log(localStorage.weiCodeUrl)
					console.log(localStorage.tuijianma)
					change()
				},
			})

		}

		function change() {
			$("#copyTarget").val(localStorage.invite_url)
			$("#code").attr("src", localStorage.weiCodeUrl);
			$("#foot").html(localStorage.tuijianma)
		}


		//复制内容
		$("#copyTarget").val(localStorage.invite_url)

		document.getElementById("copyButton").addEventListener("click", function () {
			copyToClipboard(document.getElementById("copyTarget"));
			layer.msg("复制成功")
		});

		function copyToClipboard(elem) {
			var target = document.getElementById("hiddenText");
			target.textContent = elem.value;
			console.log(target.textContent);
			select(target);
			document.execCommand("copy");
		}

		function select(element) {
			var selectedText;

			if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
				element.focus();
				element.setSelectionRange(0, element.value.length);

				selectedText = element.value;
			} else {
				if (element.hasAttribute('contenteditable')) {
					element.focus();
				}

				var selection = window.getSelection();
				var range = document.createRange();

				range.selectNodeContents(element);
				selection.removeAllRanges();
				selection.addRange(range);

				selectedText = selection.toString();
			}

			return selectedText;
		}



	</script>
</body>

</html>